<template>
  <div>
    <vHead></vHead>
    <Layout>
      <Sider ref="side1" hide-trigger collapsible :collapsed-width="78" v-model="isCollapsed">
        <vSidebar></vSidebar>
      </Sider>
      <Content :style="{margin: '20px', background: '#fff', minHeight: '900px'}">
        <router-view></router-view>
      </Content>
    </Layout>
  </div>
</template>

<script>
  import bus from '../bus';
  import vHead from './Header.vue'
  import vSidebar from './Sidebar.vue'

  export default {
    components: {
      vHead, vSidebar,
    },
    data() {
      return {
        isCollapsed: false
      }
    },
    created(){
      bus.$on('collapse', msg => {
        this.isCollapsed = msg;
      })
    }
  }
</script>
<style scoped>
  .ivu-layout-sider{
    background: #fff;
  }
</style>
